<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
<meta charset="UTF-8">
<title>${shop.shopName }</title>
<link rel="stylesheet" type="text/css" href="/apollo/css/aui/core.css">
<link rel="stylesheet" type="text/css" href="/apollo/css/aui/icon.css">
<link rel="stylesheet" type="text/css" href="/apollo/css/aui/home.css">
<link rel="stylesheet" type="text/css" href="/apollo/css/aui/aui-pull-refresh.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>

<style>
	.top{
	    width: 100%;
    	height: 150px;
    	background: url(/apollo/images/topBg.png) center/100% 100%;
	}
	.shopName {
    height: 25px;
    text-align: center;
    font-size: 1.9rem;
    color: #fff;
    font-weight: bold;
    margin-bottom: 11px;
}
.contact div.tel {
    margin-right: 12px;
}
 .top .contact div {
    position: relative;
    align-items: center;
    width: 141px;
    height: 23px;
    background: #b564ff;
    border-radius: 12px;
    color: #f9c000;
}
.flex {
    display: -ms-flexbox;
    display: flex;
}
.contact {
	margin-top:30px;
    justify-content: center;
}
.tel i.icon {
    background-image: url(/apollo/images/tel.png);
}
.contact div i.icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 23px;
    height: 23px;
    background-size: 100% 100%;
}
.weixin i.icon {
    background-image: url(/apollo/images/weixin.png);
}
.contact div i.icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 23px;
    height: 23px;
    background-size: 100% 100%;
}
.contact div span {
    margin-left: 30px;
}
/*toast*/
.aui-toast {
	background: rgba(0, 0, 0, 0.7);
	text-align: center;
	border-radius: 0.25rem;
	color: #ffffff;
	position: fixed;
	z-index: 3;
	top: 45%;
	left: 50%;
	width: 7.5em;
	min-height: 6em;
	margin-left: -3.75em;
	margin-top: -4rem;
	display: none;
}
.aui-toast .aui-iconfont {
	margin-top: 0.2rem;
	display: block;
	font-size: 2.6rem;
}
.aui-toast-content {
  margin: 0 0 0.75rem;
}
.aui-toast-loading {
    background-color: #ffffff;
    border-radius: 100%;
    margin: 0.75rem 0;
    -webkit-animation-fill-mode: both;
        	animation-fill-mode: both;
    border: 2px solid #ffffff;
    border-bottom-color: transparent;
    height: 2.25rem;
    width: 2.25rem;
    background: transparent !important;
    display: inline-block;
    -webkit-animation: rotate 1s 0s linear infinite;
        	animation: rotate 1s 0s linear infinite;
}
@font-face {
	font-family: "aui_iconfont";
	src: url('aui-iconfont.ttf') format('truetype');
}
.aui-iconfont {
	position: relative;
	font-family:"aui_iconfont" !important;
	font-size: 0.7rem;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.aui-icon-laud:before { content: "\e64b"; }

</style>

</head>
<body>
<header class="aui-header-default aui-header-fixed aui-header-bg"> 
  <a href="#" class="aui-header-item"> <i class="aui-icon-a aui-icon-code" ></i> </a>
  <div class="aui-header-center aui-header-center-clear">
    <div class="aui-header-search-box"> <i class="aui-icon aui-icon-small-search"></i>
      <input id="searchKey" placeholder="请输入商品名或关键词" value="" class="aui-header-search ">
    </div>
  </div>
  <sapn onclick="queryCargo()" href="#" class="aui-header-item-icon" style="font-size:1.2em"> 搜索 </sapn> 
</header>
<div class="aui-refresh-content" style="padding-bottom:50px" >

<div class="aui-content-box ">
  <div class=" aui-fixed-top" >
    <div class="top">
	    <p class="shopName">
	    	<a href="/shop/zsybh13s/shop-details" class="">${shop.shopName }</a>
	    	<input style="display:none" class="shopId" value="${shop.shopId }">
	    </p>
	    <div class="contact flex">
		    <div class="tel flex"><i class="icon"></i><span ><a href="tel://${shop.shopTel}">${shop.shopTel }</a></span></div>
		    <div class="weixin flex"><i class="icon"></i><span>获取客服微信</span></div>
	    </div>
    </div>
    <div class="aui-banner-pagination"></div>
  </div>
  <section class="aui-grid-contenta">
    <div class="aui-grid-rowa aui-grid-row-cleara"> 
	    <a href="/apollo/wechat/hdoitHome/index" class="aui-grid-row-itema"> <i class="aui-icon-large aui-icon-sign"></i>
	      <p class="aui-grid-row-label">度益订货</p>
	    </a> 
	    <a onclick="showDefault('success')"  class="aui-grid-row-itema"> <i class="aui-icon-large aui-icon-time"></i>
	      <p class="aui-grid-row-label">收藏本店</p>
	    </a> 
	    <a onclick="window.open('/apollo/wechat/favorite/favoriteList?customerId=${customer.customerId }&shopId=${shop.shopId}','_self')" class="aui-grid-row-itema"> 
	    	<i class="aui-icon-large aui-icon-vip"></i>
	     	<p class="aui-grid-row-label">商品收藏夹</p>
	     </a> 
	</div>
  </section>
  </div>
<div class="aui-dri"></div>

<div class="aui-recommend" style="height:40px">
    <h2>热卖商品</h2>
</div>
<div id="tableContent" >
	<c:import url="output.jsp" />
</div>
</div>
<input style="display:none" id="searchMark" value="${searchMark}">
<footer ></footer>
<footer class="aui-footer-default aui-footer-fixed"> 
	<a href="/apollo/wechat/shop/shop?shopId=${shop.shopId}&searchMark=${searchMark}" class="aui-footer-item aui-footer-active"> 
		<span class="aui-footer-item-icon aui-icon aui-footer-icon-home"></span> 
		<span class="aui-footer-item-text">首页</span> 
	</a> 
	<a href="/apollo/wechat/shop/find?shopId=${shop.shopId }&searchMark=${searchMark}" class="aui-footer-item"> 
		<span class="aui-footer-item-icon aui-icon aui-footer-icon-class"></span>
	 	<span class="aui-footer-item-text">商品</span> 
	</a> 

	<a href="/apollo/wechat/shop/car?shopId=${shop.shopId}&searchMark=${searchMark}" class="aui-footer-item"> 
		<span class="aui-footer-item-icon aui-icon aui-footer-icon-car"></span> 
	 	<span class="aui-footer-item-text">购物车</span> 
	 </a> 
	 <a href="/apollo/wechat/shop/me?shopId=${shop.shopId}&searchMark=${searchMark}" class="aui-footer-item"> 
	 	<span class="aui-footer-item-icon aui-icon aui-footer-icon-me"></span>
	  	<span class="aui-footer-item-text">我的</span> 
	 </a> 
</footer>
<script type="text/javascript" src="/apollo/js/common/jquery.min.js"></script> 
<script type="text/javascript" src="/apollo/js/aui/aui.js"></script>
<script type="text/javascript" src="/apollo/js/aui/aui-pull-refresh.js"></script>
<script type="text/javascript" src="/apollo/js/aui/aui-toast.js"></script> 
<script type="text/javascript" >

var toast = new auiToast();
function showDefault(type){
    switch (type) {
    case "success":
        toast.success({
            title:"该功能暂未开放！",
            duration:2000
        });
        break;
        case "fail":
            toast.fail({
                title:"提交失败",
                duration:2000
            });
            break;
        case "custom":
            toast.custom({
                title:"提交成功",
                html:'<i class="aui-iconfont aui-icon-laud"></i>',
                duration:2000
            });
            break;
      
        default:
           
            break;
    }
}

var pageIndex = 1;
$(document).scroll(function(){
	if  ($(document).scrollTop()>= $(document).height()-$(window).height()) {
		
		var searchMark=$("#searchMark").val();
		var shopId=$(".shopId").val();
		var searchKey=$("#searchKey").val();
		pageIndex++;
	   	var url=$.getVirtualPath()+"/wechat/shop/shop?pageIndex="+pageIndex+"&pageSize=20"+"&ajaxPost=true"+"&shopId="+shopId+"&searchKey="+searchKey+"&searchMark="+searchMark;

		var content=$.getText(url);
		
		$("#tableContent").append(content);
		$(".aui-list-product-item").last().css("margin-bottom","50px")
		pictureLoad();
		//resize();
	}
}); 




function queryCargo(){
	var searchKey=$("#searchKey").val();
	var searchMark=$("#searchMark").val();
	pageIndex=1;
	console.log(searchKey)
	var shopId=$(".shopId").val();

	var url="/apollo/wechat/shop/shop?pageIndex="+pageIndex+"&pageSize=20"+"&ajaxPost=true"+"&shopId="+shopId+"&searchKey="+searchKey+"&searchMark="+searchMark;
	
	$("#tableContent").load(url," #tableContent");
	pictureLoad();
	
}

window.onload=function (){
	pictureLoad();
}
function pictureLoad(){
	$("img[name='pictureLoad']").each(function(){
	    var url=$(this).data("url");
	    $(this).attr("src",url);
	});
}
</script> 
<script type="text/javascript">
var pullRefresh = new auiPullToRefresh({
	container: document.querySelector('.aui-refresh-content'),
	triggerDistance: 50
},function(ret){
	if(ret.status=="success"){
		setTimeout(function(){
			var shopId=$(".shopId").val();
			var searchMark=$("#searchMark").val();
			var url="/apollo/wechat/shop/shop?pageIndex="+pageIndex+"&pageSize=20"+"&ajaxPost=true"+"&shopId="+shopId+"&searchMark"+searchMark;
			var content=$.getText(url);
			pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
		},1000)
	}
})
</script>

</body>
</html>
<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp" %>
<%@ include file="/WEB-INF/views/shared/base/scripts/jqueryui.jsp"%>